<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>XHR</title>
</head>
<body>
    <button id="btn">点击加载数据</button>
    <ul id="box"></ul>

    <script>
        var byId = (id) => document.getElementById(id);
        var btn = byId('btn');
        var box = byId('box');

        function getData(callback) {
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = () => {
                console.log('xhr after response', Object.assign(xhr));

                if (xhr.readyState === 4) {
                    callback(JSON.parse(xhr.responseText), xhr);
                } else {
                    console.log(xhr.status);
                }
            }

            xhr.open('get', 'data.json');
            xhr.send(null);
        }

        btn.addEventListener('click', () => {
            getData((data) => {
                var html = [];

                data.forEach((item) => {
                     html.push(`<li>${item.name} love ${item.love}</li>`);
                });

                box.innerHTML = html.join('');
            });
        });

    </script>
</body>
</html>